<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="案例展示">
        <ph-form>
          <ph-validator :validators="{ odd, range }" ref="validator">
            <ph-divider type="primary">内置验证器</ph-divider>
            <ph-form-input v-model="formData.v1" label="required" :validators="['required']" />
            <ph-form-input v-model="formData.v2" type="number" label="number" :validators="['number']" />
            <ph-form-input v-model="formData.v3" label="email" :validators="['email']" />
            <ph-form-input
            v-model="formData.v4"
              label="color"
              placeholder="hex,rgb,rgba,hls,hlsa"
              :validators="['color']"
            />
            <ph-form-input v-model="formData.v5" label="url" :validators="['url']" />
            <ph-form-input v-model="formData.v6" label="mobile" :validators="['mobile']" />
            <ph-form-input v-model="formData.v7" label="length" :validators="['length|5']" />
            <ph-form-input
            v-model="formData.v8"
              label="chinese"
              placeholder="请输入中文"
              :validators="['chinese']"
            />
            <ph-form-input
            v-model="formData.v9"
              label="regexp"
              placeholder="regexp|^[a-z]+$"
              :validators="['regexp|^[a-z]+$']"
            />

            <ph-divider type="primary">自定义奇数验证器odd</ph-divider>
            <ph-form-input v-model="formData.v10" label="odd" :validators="['odd']" />
            <ph-divider type="primary"
              >自定义数字范围带参数验证器range|5-10</ph-divider
            >
            <ph-form-input
            v-model="formData.v11"
              label="range"
              placeholder="range|5-10"
              :validators="['range|5-10']"
            />
            <ph-form-radio v-model="formData.gender" label="性别" :validators="['required']">
              <ph-radio-item :value="0">女</ph-radio-item>
              <ph-radio-item :value="1">男</ph-radio-item>
              <ph-radio-item :value="2">其他</ph-radio-item>
            </ph-form-radio>
            <ph-form-checkbox v-model="formData.hobby" label="性别" :validators="['required']">
              <ph-checkbox-item :value="0">吃饭</ph-checkbox-item>
              <ph-checkbox-item :value="1">睡觉</ph-checkbox-item>
              <ph-checkbox-item :value="2">追剧</ph-checkbox-item>
              <ph-checkbox-item :value="3">养花</ph-checkbox-item>
              <ph-checkbox-item :value="4">夜观星象</ph-checkbox-item>
              <ph-checkbox-item :value="5">其他</ph-checkbox-item>
            </ph-form-checkbox>
            <ph-form-select v-model="formData.uni" label="就读大学" :validators="['required']">
              <ph-option>请选择</ph-option>
              <ph-option :value="0">宁波大学</ph-option>
              <ph-option :value="1">宁夏大学</ph-option>
              <ph-option :value="2">哈佛大学</ph-option>
              <ph-option :value="3">蓝翔技校</ph-option>
            </ph-form-select>
            <ph-form-select v-model="formData.lt3" label="大于3的数" :multiple="true" :validators="['required']" theme="dark" placeholder="请选择大于3的数字">
              <ph-option :value="0">0</ph-option>
              <ph-option :value="1">1</ph-option>
              <ph-option :value="2">2</ph-option>
              <ph-option :value="3">3</ph-option>
              <ph-option :value="4">4</ph-option>
              <ph-option :value="5">5</ph-option>
              <ph-option :value="6">6</ph-option>
              <ph-option :value="7">7</ph-option>
              <ph-option :value="8">8</ph-option>
            </ph-form-select>
            <ph-form-switch v-model="formData.marry" label="婚否"></ph-form-switch>
            <ph-form-textarea v-model="formData.intro" label="个人介绍" :limit="20" placeholder="我想起那天夕阳下的奔跑，那是我" :validators="['required']"/>
            <ph-form-color v-model="formData.color" label="喜欢的颜色" placeholder="hex,rgb,hsl" :validators="['required']"/>
            <ph-form-datetime v-model="formData.ct" label="创建时间" placeholder="请选择创建时间" :validators="['required']"/>
            <ph-form-number-range v-model="formData.salary" :min="10" :max="35" label="期望薪资" :validators="['required']"/>
            <ph-form-datetime-cascade v-model="formData.jobtime" label="工作时间" :validators="['required']"/>
            <ph-form-datetime-range v-model="formData.unitime" label="大学时间" placeholderStart="入学日期" placeholderEnd="毕业日期" format="" :validators="['required']"/>

            <ph-button-group :container="true" justify="center">
              <ph-button type="primary" :radius="true" @click.stop="onSubmit"
                >提交</ph-button
              >
            </ph-button-group>
          </ph-validator>
        </ph-form>
      </ph-tab-panel>
      <ph-tab-panel title="template">
        <ph-pretty>{{ template }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="script">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import {
  PhView,
  PhTab,
  PhTabPanel,
  PhDivider,
  PhForm,
  PhValidator,
  PhFormInput,
  PhFormRadio,
  PhRadioItem,
  PhFormCheckbox,
  PhCheckboxItem,
  PhFormSelect,
  PhOption,
  PhFormSwitch,
  PhFormTextarea,
  PhFormColor,
  PhFormDatetime,
  PhFormNumberRange,
  PhFormDatetimeCascade,
  PhFormDatetimeRange,

  PhButtonGroup,
  PhButton
} from "@/index";

// import * as Vs from "../../node_modules/phoeon/src/components/validator/validators";
// import * as Vs from '../../node_modules/phoeon/src/components/validator/validators'
import * as Data from "../data/validator";
const Vs = {}
export default defineComponent({
  components: {
    PhView,
    PhTab,
    PhTabPanel,
    PhDivider,
    PhForm,
    PhValidator,
    PhFormInput,
    PhFormRadio,
    PhRadioItem,
    PhFormCheckbox,
    PhCheckboxItem,
    PhFormSelect,
    PhOption,
    PhFormSwitch,
    PhFormTextarea,
    PhFormColor,
    PhFormDatetime,
    PhFormNumberRange,
    PhFormDatetimeCascade,
    PhFormDatetimeRange,

    PhButton,
    PhButtonGroup,
  },
  setup() {
    const validator = ref<InstanceType<typeof PhValidator>>()
    //eg 自定义奇数验证
    const odd = function odd(
      v: unknown,
      args: string[],
      next: () => void,
      reject: (d?: any) => void
    ) {
      if (v === undefined) return next();
      if ((v as number) % 2) next();
      else
        reject({
          valid: false,
          tip: "该数字不是奇数",
        });
    };
    //eg 自定义数字范围验证 <ph-form-input :validators="['range|5,10']">
    const range = function number(
      v: unknown,
      args: string[],
      next: () => void,
      reject: (d?: any) => void
    ) {
      //args:['5','10']
      if (v === undefined) return next();
      const start = Number(args[0]);
      const end = Number(args[1]);
      const flag = Number(v) >= start && Number(v) <= end;
      if (flag) next();
      else
        reject({
          valid: false,
          tip: `非法数字,请输入${start}-${end}之间的数字`,
        });
    };
    const formData = reactive({
        v1:'kkk',
        v2:undefined ,
        v3:'',
        v4:'',
        v5:'',
        v6:'',
        v7:'',
        v8:'',
        v9:'',
        v10:'',
        v11:'',
        gender:1,
        hobby:[2,4],
        uni:1,
        lt3:[],
        marry:false,
        intro:"",
        color:undefined,
        ct:undefined,
        salary:[],
        jobtime:[],
        unitime:[]
    })
    const onSubmit = ()=>{
      console.log(formData)
      validator.value?.validateForm().then((a:any)=>{
        console.log("valid",a)
      }).catch((e:any)=>{
        console.log("validfail",e)
      })
    }
    return {
      formData,
      vs: Object.keys(Vs),
      odd,
      range,
      validator,
      onSubmit,
      ...Data,
    };
  },
});
</script>
